<template>
  <el-dialog
    title="文件上传"
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="580px"
    top="50px"
    append-to-body
    @close="emit('pushCloseDialog')"
  >
    <el-form
      ref="postFormRef"
      :model="postFormData"
      label-width="120px"
      label-position="right"
    >
      <el-form-item
        prop="fileList"
        label="Excel文件"
        :rules="[{ required: true, message: '请选择要倒入的Excel文件' }]"
      >
        <div class="form-space-between" style="position: relative">
          <p class="absolute top-0 right-0 leading-32px">
          <el-link :underline="false" :href="templateDownUrl" type="warning" target="_blank"><el-icon><Download /></el-icon> 下载模版</el-link>
        </p>
          <file-upload-component
            ref="fileUploadRef"
            :list-data="fileList"
            :append-file-path="filePath"
            :limit="10"
            list-type="text"
            acceptType=".xlsx,.xls"
            acceptTypeText="请上传 .xlsx,.xls 文件"
            :auto-upload="false"
            @push-end="uploadEndHandler"
          />
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" :loading="loading" @click="postHandler">
        提交
      </el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { UploadInstance } from "element-plus";
const emit = defineEmits(["pushCloseDialog", "pushEnd"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  // 显示的文字
  labelText:{
    type: String,
    default:""
  },
  // 模版下载路径
  templateDownUrl:{
    type: String,
    default:""
  }
});
watch(
  () => props.visible,
  (val) => {
    if (val) {
      init();
    }
    dialogVisible.value = val;
  },
  { deep: true }
);

const dialogVisible = ref(false),
  loading = ref(false),
  postFormData:any = ref({}),
  fileUploadRef = ref<UploadInstance>(),
  fileList = ref([]),
  filePath = ref(import.meta.env.VITE_APP_FLOW);

// 数据初始化
const init = async () => {
  fileList.value = [];
};
// 文件上传
const uploadEndHandler = async (list: any) => {
  fileList.value = list;
};
// 数据提交
const postHandler = async () => {
  console.log(fileList.value);
  
  // fileUploadRef.value?.submit()
};
</script>
